<template>
  <div ref="pieChart08" class="pie-chart-08 chart"></div>
</template>

<script setup>
import { onMounted, ref, inject } from "vue";

const pieChart08 = ref(null);
const echarts = inject("$echarts");

let img =
  "";

let seriesData = [
  {
    name: "正常",
    value: 14294,
  },
  {
    name: "报警",
    value: 314,
  },
  {
    name: "离线",
    value: 5137,
  },
  {
    name: "故障",
    value: 245,
  },
];

let data = [];
let color = ["#00ffff", "#409B5C", "#006ced", "#ffe000", "#ffa800", "#ff5b00", "#ff3000"];
let lengendData = [];
for (let i = 0; i < seriesData.length; i++) {
  lengendData.push(seriesData[i].name);
  data.push(
    {
      value: seriesData[i].value,
      name: seriesData[i].name,
      itemStyle: {
        borderWidth: 5,
        shadowBlur: 20,
        borderColor: color[i],
        shadowColor: color[i],
      },
    },
    {
      value: 2,
      name: "",
      itemStyle: {
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        color: "rgba(0, 0, 0, 0)",
        borderColor: "rgba(0, 0, 0, 0)",
        borderWidth: 0,
      },
    }
  );
}
let seriesOption = [
  {
    name: "",
    type: "pie",
    clockwise: false,
    radius: [105, 109],
    // hoverAnimation: false,
    emphasis: {
      scale: false,
    },
    itemStyle: {
      label: {
        show: true,
        position: "outside",
        color: "#ddd",
        formatter: function (params) {
          let percent = 0;
          let total = 0;
          for (let i = 0; i < seriesData.length; i++) {
            total += seriesData[i].value;
          }
          percent = ((params.value / total) * 100).toFixed(0);
          if (params.name !== "") {
            return (
              "设备状态：" + params.name + "\n" + "\n" + "占百分比：" + percent + "%"
            );
          } else {
            return "";
          }
        },
      },
      labelLine: {
        length: 30,
        length2: 100,
        show: true,
        color: "#00ffff",
      },
    },
    data: data,
  },
];
const option = {
  compCode: "C202309045",
  backgroundColor: "#0A2E5D",
  color: color,
  title: {
    text: "设备状态",
    top: "48%",
    textAlign: "center",
    left: "49%",
    textStyle: {
      color: "#fff",
      fontSize: 22,
      fontWeight: "400",
    },
  },
  graphic: {
    elements: [
      {
        type: "image",
        z: 3,
        style: {
          image: img,
          width: 178,
          height: 178,
        },
        left: "center",
        top: "center",
        position: [100, 100],
      },
    ],
  },
  tooltip: {
    show: false,
    backgroundColor: "#053962", // 设置背景色为半透明红色
    borderColor: "#165e9e", // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: "#fff",
    },
  },
  legend: {
    icon: "circle",
    orient: "horizontal",
    // x: 'left',
    data: lengendData,
    right: 320,
    bottom: 120,
    align: "right",
    textStyle: {
      color: "#fff",
    },
    itemGap: 20,
  },
  toolbox: {
    show: false,
  },
  series: seriesOption,
};

onMounted(() => {
  const chart = echarts.init(pieChart08.value);
  chart.setOption(option);
});
</script>
